import { CaretLeftOutlined , CaretRightOutlined  } from '@ant-design/icons';
import { useCallback, useEffect, useState } from 'react';
import { getNewsList } from '../../api';

const News = () => {

    const [page, setPage] = useState(1);
    const [pageTotal, setPageTotal] = useState(0);
    const [table, setTable] = useState([]);
    const getNewsListByApi = () => {
        getNewsList({ page: page, size: 4 })
            .then((res) => {
                setTable(res.data.list);
                setPageTotal(res.data.count)
            })

    }

    useEffect(() => {
        getNewsListByApi();
    }, [page])
    return (
        <div className='new-display'>
            {table?.map((item, index) => (
                <div className='news-contain' key={item.id} onClick={() => window.open("https://mp.weixin.qq.com/s/048GWya2Wmw20dgAwoRYFw",'_self')}>
                    <img className="news-pic" src={`${item.discover}`}>

                    </img>
                    <div className="news-content">
                        <div className="news-titleAndTime">
                            <div className='new-title'>{item.title}</div>
                            <div className='new-time'>{item.created_time}</div>
                        </div>
                        <div style={{ width: 288 }}>{item.content}</div>
                    </div>
                </div>))}
            <div className='list-pagination'>
                {/* 这边是调用案例 */}
                <CaretLeftOutlined  onClick={() => {  if(page>1) setPage(page - 1); }} />
                <span>{page}/{pageTotal}</span>
                <CaretRightOutlined  onClick={() => { if(page<pageTotal) setPage(page + 1); }} />
            </div>
        </div>
    )
}
export default News;